<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <!--数据表格-->
    <table id="demo" lay-filter="test"></table>
    <script>
        layui.use(['table',"laypage","layer"], function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#demo'
                ,url: 'http://api.tp5.com/blog' //数据接口
                ,page: {
                    limit : 1
                    ,curr: 1 //设定初始在第 5 页
                    ,limits:[1,3,5]
                } //开启分页

                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '用户名', width:80, edit: 'text'}
                    ,{field: 'sex', title: '性别', width:80}
                    ,{field: 'number', title: '号码', width:130}
                    ,{field: 'skill', title: '技能', width: 177}
                    ,{field: 'text', title: '意见'}
                    ,{fixed: 'right', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
            });

            //监听单元格编辑
            table.on('edit(test)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);

                $.ajax({
                    url:"http://api.tp5.com/blog/" + obj.data.id,
                    data:{_method:"put",field:obj.field,value:obj.value},
                    type:'post',
                    success:function(res){
                        console.log(res);
                    }

                });
            });

            table.on('tool(test)',function (obj) {
                /*console.log(obj);
                console.log(obj.data);
                console.log(obj.event);*/

                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:"http://api.tp5.com/blog/" + obj.data.id,
                            data:{_method:"delete"},
                            type:'post',
                            success:function(res){
                                console.log(res);
                                layer.msg(res.msg);
                            }
                        })
                    });
                }
            });

        });
    </script>
</body>
</html>